<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <style type="text/css">
        p.fixed {
            position:fixed;
            top: 30px;
            right: 5px;
        }

        p.pos_left {
            position:relative;
            left: -20px;
        }

        p.pos_right {
            position:relative;
            left: 20px;
        }
        p.pos_abs {
            position:absolute;
            left: 5px;
            top: 5px;
        }
        div.right {
            border:solid;
            /* border-width: 1px; */
            position:relative;
            left: 170px;
        }

        img.abs {
            position:absolute;
            left:10px;
            top:30px;
            z-index: -1;
        }
        img.abs2 {
            position:absolute;
            left:55px;
            top:50px;
            z-index: -2;
        }
        
        img.clip {
            position:absolute;
            clip:rect(20px,60px,80px,0px);
        }

        p.scroll {
            overflow:scroll;
            height: 100px;
            width: 200px;
        }
    
    </style>
	<title> css positioning </title>
</head>
<body>
    <p>    some text</p>
    <p class="fixed">    some text fixed</p>
    <p>    some text</p>
    <p class="pos_left">some text</p>
    <p>    some text</p>
    <p class="pos_right">some text</p>
    <div class="right">
        <p>    some text</p>
        <p class="pos_right">some text</p>
    </div>
    <p>    some text 中文</p>
    <img src="nine.gif" alt="" class="abs" />
    <img src="nine.gif" alt="" class="abs2" />
    <div class="right">
        <p>    some text 中文</p>
        <p class="pos_abs">some text</p>
        <img class="clip" src="nine.gif" alt="" width="100" height="100" />
    </div>
<p class="scroll">    ssome text use the overflow property when you want to have better control of tsome text use the overflow property when you want to have better control of tsome text use the overflow property when you want to have better control of tome text use the overflow property when you want to have better control of the layout.</p>
<p>change the cursor</p>
<span style="cursor:wait;">change the cursor</span>
<br />

<br />

change the cursor
change the cursor

</body>
</html>
